<template>
	<view class="contain">
		<view class="touristMsg">
			<view class="headImg" v-if="touristMsg.CoverImg">
				<image :src="touristMsg.CoverImg" mode="scaleToFill"></image>
			</view>
			<view class="touristContain">
				<view class="touristTitle">
					<view class="left">
						<view class="name">{{touristMsg.Title}}</view>
						<view class="label">
							<text class="" v-for="(item,index) in touristMsg.Tags" :key="index">{{item}}</text>
						</view>
					</view>
					<!-- 					<view class="right" v-if="hasRedio">
						<image src="../../static/static/flower.png" mode="widthFix"></image>
						<text>听解说</text>
					</view> -->
				</view>
				<view class="touristDetail">
					<mp-html :content="touristMsg.ChineseSubstance" />
					<!-- <mp-html :content="mpHtml" /> -->
					<!-- <rich-text :preview="true" :nodes="touristMsg.ChineseSubstance"></rich-text> -->
					<!-- <text class="allDetail">{{touristMsg.ChineseSubstance}}</text> -->
					<!-- <text class="checkAll">[查看全部]</text> -->
				</view>
			</view>
		</view>
		<!-- 		<view class="scBtn" @click="handleCollection">
			<uni-icons v-if="isCollection" type="star-filled" size="20" color="#2E6966!important"></uni-icons>
			<uni-icons v-else color="gray" type="star" size="20"></uni-icons>
			收藏
		</view> -->
	</view>
</template>

<script>
	import {
		getArticleDetail,
		getAddCollection,
		getCancelCollection,
		getCheckCollection
	} from '@/api/homePage.js'
	import Config from '@/config/index.js'
	export default {
		data() {
			return {
				//景区详情数据
				touristMsg: '',
				bgcColor: ['#007AFF', '#4CD964', '#dd524d', '#f0ad4e'],
				hasRedio: false,
				// 是否收藏
				isCollection: false,
				goodsId: '', //文章ID
				mpHtml:'<a href="" class="ticket-card" target="_self"> <div class="ticket-card__image"> <static class="ticket-card__image_sonImg" src=" https://xsstp.monkeysoftware.cn:443/upload/static/20250319/202503191554506058.png " alt="" /> </div> <div class="ticket-card__content"> <div class="ticket-card__title">门票产品1</div> <div class="ticket-card__description"> 产品介绍2 </div> <div class="ticket-card__price">￥100</div> </div> </a>'
			}
		},
		onLoad(option) {
			this.getDetail(option.id);
			this.goodsId = option.id;
			// uni.setNavigationBarTitle({
			// 	title:this.touristMsg.Title
			// });
			// uni.setNavigationBarTitle({
			// 	title: option.name
			// });
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$category.appName, //分享的名称
				path: '/pages/detail/touristDetail?id=' + this.goodsId,
				mpId: this.$category.appid //此处配置微信小程序的AppId
			}
		},
		methods: {
			// 处理收藏点击
			async handleCollection() {
				try {
					uni.showLoading({
						title: '提交中...',
						mask: true
					})
					if (this.isCollection) {
						await getCancelCollection({
							Id: this.goodsId,
							CollectionType: 2
						})
						this.isCollection = false
						this.$api.msg('取消成功', 1500, false, 'success')
					} else {
						await getAddCollection({
							Id: this.goodsId
						})
						this.isCollection = true
						this.$api.msg('收藏成功', 1500, false, 'success')
					}
					uni.hideLoading()
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			async getDetail(id) {
				try {
					uni.showLoading();
					const {
						Data
					} = await getArticleDetail({
						Id: id
					})
					console.log(Data)
					uni.hideLoading();
					const regex = new RegExp('<static', 'gi');
					// Data.ChineseSubstance = Data.ChineseSubstance.replace(regex,
					// 	`<static style="width: 100%;height:100%;"`);
					if (Data.Tags != null) {
						Data.Tags = Data.Tags.split(',');
					}
					this.touristMsg = Data;


				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100vw;
		overflow: hidden;

		.touristMsg {
			.headImg {
				width: 100%;
				// height: 360rpx;
				overflow: hidden;

				image {
					width: 100%;

				}
			}

			.touristContain {
				width: 100%;
				padding: 40rpx;

				.touristTitle {
					display: flex;
					justify-content: space-between;

					.left {

						// width: 80%;
						.name {
							font-size: 32rpx;
							font-weight: 600;
						}

						.label {
							margin-top: 20rpx;

							text {
								padding: 0 8rpx;
								border: 1rpx solid #f0ad4e;
								margin-left: 10rpx;
								font-size: 26rpx;
								color: #f0ad4e;
								border-radius: 6rpx;
							}
						}
					}

					.right {
						width: 130rpx;
						height: 100rpx;
						padding: 10rpx 0 0 30rpx;
						text-align: center;
						border-left: 1px solid #f5f5f5;

						image {
							width: 60rpx;
							height: 60rpx;
						}

						text {
							display: block;
							font-size: 24rpx;
							// color: #999;
						}
					}
				}

				.touristDetail {
					width: 100%;
					padding: 40rpx 0 0;
					// color: #999;
					// .checkAll{
					// 	color: #f0ad4e;
					// }
					// .allDetail{
					// 	text-overflow: -o-ellipsis-lastline;
					// 	overflow: hidden;  
					// 	text-overflow: ellipsis;  
					// 	display: -webkit-box;  
					// 	-webkit-line-clamp: 2;    //文本一行显示
					// 	-webkit-box-orient: vertical; 
					// }
				}
			}
		}
	}

	// 公共头部
	.commonHeadBox {
		width: 100%;
		padding: 0 40rpx;
		display: flex;
		justify-content: space-between;
		margin: 40rpx 0;

		.commonLeft {
			background-color: #fff;
			font-size: 34rpx;
			font-weight: 600;
			display: flex;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}

		.commonRight {
			font-size: 28rpx;
			color: #666;
			background-color: #fff;
			display: flex;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		text {
			margin: 0 8rpx;
		}
	}

	//收藏按钮
	.scBtn {
		position: fixed;
		right: 2%;
		bottom: 4%;
	}
</style>